<template>
	<view class="verify-page">
		<view class="verify-body">
			<view class="prompt">尊敬的用户，为保障您的权盖，提供更好的服务请务办提供真实身份信息</view>
			<form class="user-form" @submit="formSubmit">
				<view class="uni-form-item uni-column">
					<view class="uni-input-wrapper">
						<input :value="form.oldPassword" password class="uni-input" name="oldPassword" placeholder="账号" :maxlength="16" @input="changeForm($event, 'oldPassword')" />
						<text class="slw-icon" v-if="form.oldPassword && form.oldPassword.length" @click="clearInput('oldPassword')">&#xe832;</text>
					</view>
					<view class="h-line"></view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="uni-input-wrapper">
						<input :value="form.newPassword" password class="uni-input" name="newPassword" placeholder="密码" :maxlength="16" @input="changeForm($event, 'newPassword')"/>
						<text class="slw-icon" v-if="form.newPassword && form.newPassword.length" @click="clearInput('newPassword')">&#xe832;</text>
					</view>
					<view class="h-line"></view>
				</view>
				<view class="uni-btn-v">
					<slw-button circle formType='submit'>确定</slw-button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import {updatePassword} from '@/api/trader.js'
	import SlwButton from '@/components/slw-ui/button/index.vue'

	export default {
		components: {SlwButton},
		data() {
			return {
				form: {}
			}
		},
		methods: {
			//	提交 form 表单
			formSubmit (e) {
				uni.showLoading({title: '加载中...', mask: true})
				const {newPassword, oldPassword} = e.detail.value
				updatePassword({
					userId: '11111',
					brokerID: '0095',
					newPassword,
					oldPassword,
				}).then(res => {
					uni.hideLoading()
					uni.showToast({icon: 'none', title: '重置密码成功',})
					uni.navigateBack()
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({icon: 'none', title: err.message})
				})
			},
			//	输入框 change 事件
			changeForm (e, name) {
				const {value} = e.target
				this.$set(this.form, name, value)
			},
			//	清空 input 输入框
			clearInput (name) {
				this.$set(this.form, name, '')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.verify-page{
		height: 100vh;
		// padding: 30rpx;
		background: #fff;
		.verify-body{
			padding: 70rpx;
			.prompt{
				color: #999;
				font-size: 24rpx;
				text-align: center;
				padding-bottom: 60rpx;
			}
			
			.user-form{
				.uni-input{
					padding: 20rpx 0;
				}
				.uni-btn-v{
					padding-top: 100rpx;
				}
			}
			
			.uni-input-wrapper {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				flex-direction: row;
				background: #fff;
			}
			
			.uni-input {
				height: 28px;
				line-height: 28px;
				font-size: 15px;
				padding: 0px;
				flex: 1;
				background: #fff;
			}
		}
	}
</style>
